<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>椭圆运动效果</title>
  <style type="text/css">
    body {
      background-color: #eaf0f2;
    }

    h1 {
      font-size: 14px;
      font-family: "Microsoft Yahei";
      text-align: center;
    }

    body {
      background: #000;
    }

    .butterfly {
      width: 150px;
      height: 142px;
      margin: 0 auto;
      -webkit-transform-origin: center 150%;
      transform-origin: center 150%;
      -webkit-animation: circle 2s infinite linear;
      animation: circle 2s infinite linear;
    }

    .butterfly img {
      width: 100%;
      height: auto;
    }

    figure {
      margin-left: 200px;
      -webkit-animation: updown 1s infinite ease-in-out alternate;
      animation: updown 1s infinite ease-in-out alternate;
      /* -webkit-animation-delay:-.5s;  */
    }

    @-webkit-keyframes updown {
      to {
        -webkit-transform: translateY(200px);
        transform: translateY(200px);
      }
    }

    @-webkit-keyframes circle {
      to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn);
      }
    }
  </style>
</head>
<body>
<h1>请使用webkit内核标准浏览器查看效果</h1>
<figure>
  <div class="butterfly">
    <img src="http://p7.qhimg.com/t01a4c54ef5309e561c.png" alt=""/>
  </div>
</figure>
</body>
</html>
